<template>
  <div class="userList-nav">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="table-nav">
      <div class="search-nav">
        <el-input v-model="SearchInput" style="width: 20%; min-width: 100px" placeholder="Please Input" size="large"
          clearable @clear="getList()">
          <template #append>
            <el-button icon="Search" @click="searchUser()" />
          </template>
        </el-input>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" size="large" @click="showAddUser = true">添加用户</el-button>
        <add-user-com v-model:showAddUser="showAddUser" :getList="getList"></add-user-com>
      </div>
      <el-table :data="userList.users" border stripe style="width: 100%" :max-height="500">
        <el-table-column type="index" width="50" />
        <el-table-column prop="username" label="姓名" min-width="100" />
        <el-table-column prop="email" label="邮箱" min-width="200" />
        <el-table-column prop="mobile" label="电话" min-width="100" />
        <el-table-column prop="mg_state" label="状态" min-width="100">
          <template #default="scope">
            <div>
              <el-switch v-model="scope.row.mg_state" @change="changeState(scope)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template #default="scope">
            <div>
              <!-- 修改按钮 -->
              <el-button type="success" icon="Edit" @click="setUser(scope)" />
              <!-- 删除按钮 -->
              <el-button type="danger" icon="Delete" @click="deleteUser(scope)" />
              <!-- 分配职位按钮-->
              <el-tooltip content="分配职位" placement="right-start">
                <el-button type="warning" icon="Setting" @click="changeUser(scope)" />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-nav">
        <el-pagination v-model:currentPage="pagenum" v-model:page-size="pagesize" :page-sizes="[1, 5, 10, 50]"
          :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="changePage"
          @current-change="changePage" />
      </div>
    </div>
    <div>
      <set-user-com v-model:showSetUser="showSetUser" :getList="getList" :tableScope="scope"></set-user-com>
      <role-user-com v-model:showRoleUser="showRoleUser" :getList="getList" :tableScope="scope"></role-user-com>
    </div>
  </div>
</template>

<script setup>
import AddUserCom from "@/components/userList/AddUserCom.vue";
import SetUserCom from "@/components/userList/SetUserCom.vue";
import RoleUserCom from "@/components/userList/RoleUserCom.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getUserList,
  deleteUserList,
  changeStateUserList,
} from "@/api/userList";
import { reactive, ref } from "vue";
let pagenum = ref(1);
let pagesize = ref(5);
let userList = reactive({});
let SearchInput = ref("");
let showAddUser = ref(false);
let showSetUser = ref(false);
let showRoleUser = ref(false);
let scope = reactive({});
let total = ref(0);
let getList = async (query = "") => {
  let res = await getUserList({
    query,
    pagenum: pagenum.value,
    pagesize: pagesize.value,
  });
  Object.assign(userList, res.data);
  total.value = userList.total;
};
const searchUser = () => {
  getList(SearchInput.value);
};
const changePage = () => {
  getList();
};
getList();
const setUser = (scope1) => {
  Object.assign(scope, scope1);
  showSetUser.value = true;
};
const deleteUser = (scope1) => {
  ElMessageBox.confirm(`确定要删除用户${scope1.row.username}吗？`, "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await deleteUserList(scope1.row.id);
      let ls = Boolean(res.meta.status >= 200 && res.meta.status < 300);
      ElMessage({
        type: ls ? "success" : "error",
        message: ls ? "删除成功" : res.meta.msg,
      });
      getList();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const changeState = async (scope1) => {
  let res = await changeStateUserList({
    id: scope1.row.id,
    type: scope1.row.mg_state,
  });
  let ls = Boolean(res.meta.status >= 200 && res.meta.status < 300);
  ElMessage({
    type: ls ? "success" : "error",
    message: ls ? "用户状态修改成功" : res.meta.msg,
  });
};
const changeUser = (scope1) => {
  Object.assign(scope, scope1);
  showRoleUser.value = true;
};
</script>

<style lang="scss" scoped>
.userList-nav {
  position: relative;
  width: 100%;
  // height: 100%;
  overflow: auto;

  .table-nav {
    position: absolute;
    width: 100%;
    // max-height: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 10px;
    background-color: white;
    overflow: hidden;

    .el-table {
      margin: 20px 0;
    }

    .pagination-nav {}
  }
}
</style>